import React, { Component } from 'react';
import connect from './connect'
import connect2 from './connect2'

import { ListBox } from './style'


@connect
@connect2
class List extends Component {

  state = {
    // 默认高亮显示的菜单
    currentIndex: 0,
    rightData: [],
    // data:"material"
    righetIndex: 0,
  }
  
  datas =[]
  /* // 只渲染一次，但是数据后来才有
  componentDidMount() {
    this.changeNav(0)
  } */
  // 第1挂载和更新都执行
  static getDerivedStateFromProps(props, state) {
    
    // console.log(111111);
    return state.rightData.length === 0 ? (props.category[0] ? { rightData: props.category[0]['data'] } : null) : null
    
  }

  // 点击切换时，更新左侧样式和右侧数据
  changeNav(index) {
    
    this.setState(state => ({
      currentIndex: index,
      rightData: this.datas[index]['data']
      
      // rightData: this.props.category[index]['data']
    })
    
    )
    // this.forceUpdate();
  }
  // 点击切换时，更新左侧样式和右侧数据
  changeItem(index) {
    
    this.setState(state => ({
      righetIndex: index,
    
      // rightData: this.datas[index]['data']
      
      // rightData: this.props.category[index]['data']
    })
   
    
    )
    console.log(index);
    // this.forceUpdate();
  }

  render() {

    // console.log(this.props.listDataIndex);
    this.props.listDataIndex === 1?  this.datas =  this.props.material:  this.datas =  this.props.category;
    // material
    return (
      <ListBox>
        {/* 左侧菜单 */}
        <div>
          <ul>
            {
              // this.props.category && this.props.category.map((item, index) => (
                this.datas&&  this.datas.map((item, index) => (
                this.state.currentIndex === index
                  ?
                  <li className="active" onClick={() => this.changeNav(index)} key={'cate_' + index} ><span>{item.name}</span></li>
                  :
                  <li onClick={() => this.changeNav(index)} key={'cate_' + index} ><span>{item.name}</span></li>
              ))
            }
          </ul>
        </div>
        {/* 右侧选项 */}
        <div>
          <ul>
            {
              this.state.rightData.length > 0
                ?
                this.state.rightData.map((item, index) => (
                  this.state.righetIndex === index
                  ?
                  <li className="active"  onClick={() => this.changeItem(index)} key={"right_" + index}>{item}</li>
                  :
                  <li  onClick={() => this.changeItem(index)} key={"right_" + index }>{item}</li>
                ))
                :
                <li>加载中...</li>
            }
          </ul>
        </div>
      </ListBox>
    );
  }
}

export default List;
